<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语学习助手</title>
    <!-- Element UI CSS -->
    <link rel="stylesheet" href="./libs/element-ui.css">
    <!-- Vue.js -->
    <script src="./libs/vue.js"></script>
    <!-- Element UI JS -->
    <script src="./libs/element-ui.js"></script>
    <!-- Axios for HTTP requests -->
    <script src="./libs/axios.min.js"></script>

    <!-- 引入自定义组件 -->
    <script src="./components/WordPopover.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .input-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .results-section {
            margin-top: 20px;
        }

        .word-span {
            cursor: pointer;
            border-radius: 3px;
            transition: background-color 0.3s;
        }

        .word-span:hover {
            background-color: #e6f7ff;
            color: #1890ff;
        }

        .sentence-content {
            line-height: 1.8;
            font-size: 16px;
        }

        .chinese-translation {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        /* Popover内容样式 */
        .el-popover p {
            margin: 8px 0;
            line-height: 1.6;
        }

        .el-popover strong {
            color: #409EFF;
            font-weight: 600;
        }

        .el-popover em {
            color: #67C23A;
            font-style: italic;
        }

        .el-popover ul {
            margin: 8px 0;
            padding-left: 20px;
        }

        .el-popover li {
            margin: 4px 0;
            line-height: 1.5;
        }

        .el-popover br {
            line-height: 1.2;
        }

        /* WordPopover 组件样式 */
        .word-reference {
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 3px;
            transition: all 0.3s ease;
            display: inline-block;
        }

        .word-reference:hover {
            background-color: #e6f7ff;
            color: #1890ff;
            transform: translateY(-1px);
        }

        .word-analysis-content {
            max-height: 400px;
            overflow-y: auto;
            line-height: 1.6;
            font-size: 14px;
        }

        .word-analysis-content::-webkit-scrollbar {
            width: 6px;
        }

        .word-analysis-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        .word-analysis-content::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

        .word-analysis-content::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        /* 词组解释区域样式 */
        .group-desc-section {
            margin-top: 15px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #409EFF;
        }

        .group-desc-content {
            margin-top: 10px;
            line-height: 1.6;
            font-size: 14px;
            color: #333;
        }

        .group-desc-content strong {
            color: #409EFF;
            font-weight: 600;
        }

        .group-desc-content em {
            color: #67C23A;
            font-style: italic;
        }

        .group-desc-content ul {
            margin: 10px 0;
            padding-left: 20px;
        }

        .group-desc-content li {
            margin: 6px 0;
            line-height: 1.5;
        }

        .group-desc-content br {
            line-height: 1.2;
        }

        /* 图片上传组件样式 */
        .el-upload__tip {
            font-size: 12px;
            color: #606266;
            margin-top: 5px;
        }

        .el-upload-list {
            margin-top: 10px;
        }

        .el-upload-list__item {
            transition: all 0.3s;
        }

        .el-upload-list__item:hover {
            background-color: #f5f7fa;
        }

        /* 图片卡片预览样式 */
        .el-upload--picture-card {
            width: 148px;
            height: 148px;
            line-height: 146px;
        }

        .el-upload-list--picture-card .el-upload-list__item {
            width: 148px;
            height: 148px;
        }

        /* 图片预览对话框样式 */
        .el-dialog__body img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            max-height: 70vh;
            object-fit: contain;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        /* OCR结果对话框样式 */
        .ocr-results-dialog .el-message-box__content {
            max-height: 500px;
            overflow-y: auto;
        }

        /* 按钮组样式优化 */
        .button-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: flex-start;
        }

        .button-group .el-button {
            margin: 0;
        }

        .button-group .el-upload {
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <h1 style="text-align: center; color: #333; margin-bottom: 30px;">
                <i class="el-icon-reading"></i> 英语学习助手
            </h1>

            <!-- 输入区域 -->
            <div class="input-section">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-input type="textarea" :rows="8" placeholder="请输入英文文本，每行一句话..." v-model="inputText"
                            :disabled="isProcessing"
                               
                            >
                        </el-input>
                        <el-input placeholder="粘贴文件"   @focus="handleFileInputFocus"></el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 15px;">
                    <el-col :span="24" class="button-group">


                        <el-button type="primary" size="mini" @click="processText" :loading="isProcessing"
                            :disabled="!inputText.trim()">
                            <i class="el-icon-magic-stick"></i>
                            {{ isProcessing ? '解析中...' : '开始解析' }}
                        </el-button>

                        <el-button type="primary" size="mini" @click="triggerformattingText"
                        >
                            <i class="el-icon-magic-stick"></i>
                             格式化
                        </el-button>


                        <el-button type="info" @click="clearSession()" size="mini" title="清除所有缓存数据">
                            清除缓存
                        </el-button>
                        
                        <el-button 
                            type="warning" 
                            size="mini" 
                            @click="processOcrImages" 
                            :loading="isOcrProcessing"
                            :disabled="uploadedImages.length === 0">
                            <i class="el-icon-view"></i>
                            {{ isOcrProcessing ? 'OCR识别中...' : 'OCR解析文字' }}
                        </el-button>
                    </el-col>
                </el-row>
                
                <!-- 图片上传区域 - 单独一行 -->
                <el-row style="margin-top: 15px;">
                    <el-col :span="24">
                        <el-upload
                            ref="imageUpload"
                            action="#"
                            list-type="picture-card"
                            :multiple="true"
                            :auto-upload="false"
                            :accept="'image/*'"
                            :limit="10"
                            :on-change="handleImageChange"
                            :on-remove="handleImageRemove"
                            :on-preview="handlePictureCardPreview"
                            :on-exceed="handleExceed">
                            <i class="el-icon-plus"></i>
                            <div slot="tip" class="el-upload__tip">
                                支持jpg/png等格式，最多10张图片
                            </div>
                        </el-upload>
                        
                        <!-- 图片预览对话框 -->
                        <el-dialog :visible.sync="dialogVisible" title="图片预览">
                            <img width="100%" :src="dialogImageUrl" alt="预览图片">
                        </el-dialog>
                        
                        <!-- 附件输入框 - 支持粘贴文件 -->
                        <!-- <el-input
                            ref="fileInput"
                            v-model="fileInputPlaceholder"
                            placeholder="点击此处并按 Ctrl+V 粘贴图片文件"
                            size="mini"
                            style="width: 250px;"
                            readonly
                            @focus="handleFileInputFocus"
                            >
                            <template slot="prepend">
                                <i class="el-icon-paperclip"></i>
                            </template>
                        </el-input> -->
                    </el-col>
                </el-row>
            </div>

            <!-- 结果展示区域 -->
            <div class="results-section" v-if="hanList.length > 0">
                <el-card v-for="(item, index) in hanList" :key="index"
                    style="margin-bottom: 20px;" shadow="hover">
                    <div slot="header">
                         <div>
                             <span v-for="(word, wordIndex) in item.wordChildren" :key="wordIndex" class="word-span">
                                <word-popover :word="word" :line-index="index" :word-index="wordIndex"
                                    @load-analysis="loadWordAnalysis">
                                </word-popover>
                            </span>
                         </div>
                         <div>
                            <small class="color-grey">
                                原文:{{item?.english}}
                            </small>
                         </div>
                    </div>

                    <!-- 中文翻译 -->
                    <div class="chinese-translation" v-if="item.chinese">
                        <strong>翻译：</strong>
                        <div v-html="formatAnalysisContent(item.chinese)"></div>
                    </div>

                    <!-- 英文原句，每个单词可点击 -->
                    <div class="sentence-content">
                        <!-- <div>
                            <strong>原句：</strong>
                            <span v-for="(word, wordIndex) in item.wordChildren" :key="wordIndex" class="word-span">
                                <word-popover :word="word" :line-index="index" :word-index="wordIndex"
                                    @load-analysis="loadWordAnalysis">
                                </word-popover>
                            </span>
                        </div> -->
                        <div v-if="item.groupDesc" class="group-desc-section">
                            <strong>词组解释：</strong>
                            <div class="group-desc-content" v-html="formatGroupDescContent(item.groupDesc)"></div>
                        </div>
                    </div>
                </el-card>
            </div>

            <!-- 加载遮罩 -->
            <!-- <div v-if="isProcessing" class="loading-overlay">
                <el-card style="text-align: center; padding: 20px;">
                    <i class="el-icon-loading" style="font-size: 24px; color: #409EFF;"></i>
                    <p style="margin-top: 10px; color: #666;">正在处理文本，请稍候...</p>
                </el-card>
            </div> -->
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    inputText: '', // 输入的文本
                    hanList: [], // 处理后的行数组
                    isProcessing: false, // 是否正在处理
                    formattedSentences: [], // 格式化后的句子列表
                    // 图片上传和OCR相关
                    uploadedImages: [], // 已上传的图片文件列表
                    isOcrProcessing: false, // 是否正在进行OCR处理
                    uploadUrl: '', // 上传URL（这里设为空，因为我们使用手动上传）
                    ocrResults: [], // OCR识别结果
                    fileInputPlaceholder: '', // 附件输入框的占位文本
                    // 图片预览对话框相关
                    dialogVisible: false, // 预览对话框是否可见
                    dialogImageUrl: '', // 预览图片URL
                    apiConfig: {
                        url: 'https://www.dmxapi.cn/v1/chat/completions',
                        headers: {
                            'Authorization': 'Bearer sk-834gcXipdT1A0OWbJWGDtMQMuuqENTNhGUbenwENstQF7rpb',
                            'Content-Type': 'application/json'
                        }
                    }
                }
            },

            watch: {
                /**
                 * 监听 inputText 变化，自动保存到 sessionStorage
                 */
                inputText(newValue) {
                    this.saveToSession('inputText', newValue);
                },

                /**
                 * 监听 hanList 变化，自动保存到 sessionStorage
                 */
                hanList: {
                    handler(newValue) {
                        this.saveToSession('hanList', newValue);
                    },
                    deep: true
                }
            },
            methods: {
                /**
                 * 开始解析文本的主函数
                 */
                async processText() {
                    if (!this.inputText.trim()) {
                        this.$message.warning('请输入要解析的英文文本');
                        return;
                    }

                    this.isProcessing = true;
                    this.hanList = [];

                    try {
                        // 步骤1: 切分每一行，得到行数组
                        const lines = this.splitTextToLines(this.inputText);

                        // 步骤2: 为每行获取中文翻译
                         this.translateLines(lines);

                        //   步骤3: 为每行获取   常见的词组
                         this.translateWordGroupDesc(lines);

                        // 步骤4: 获取标题并设置HTML title
                         this.getTitleAndSetHtmlTitle();

                        this.$message.success('文本解析完成！');
                    } catch (error) {
                        console.error('解析过程中出错:', error);
                        this.$message.error('解析失败，请检查网络连接或稍后重试');
                    } finally {
                        this.isProcessing = false;
                    }
                },

                /**
                 * 将文本切分为行数组
                 * @param {string} text - 输入文本
                 * @returns {Array} 行数组
                 */
                splitTextToLines(text) {
                    return text.split('\n')
                        .map(line => line.trim())
                        .filter(line => line.length > 0)
                        .map(line => ({
                            english: line,
                            chinese: '',
                            wordChildren: this.splitLineToWords(line)
                        }));
                },

                /**
                 * 将一行文本切分为单词数组
                 * @param {string} line - 一行文本
                 * @returns {Array} 单词数组
                 */
                splitLineToWords(line) {
                    return line.split(' ')
                        .filter(word => word.trim().length > 0)
                        .map(word => ({
                            english: word,
                            analysis: null // 词汇分析内容，懒加载
                        }));
                },

                /**
                 * 为行数组获取中文翻译
                 * @param {Array} lines - 行数组
                 */
                async translateLines(lines) {
                    for (let i = 0; i < lines.length; i++) {
                        const line = lines[i];
                        try {
                            // 使用后端句子翻译接口
                            const response = await axios.get(`http://127.0.0.1:9001/api/translate/sentence?text=${encodeURIComponent(line.english)}`);

                            if (response.data && response.data.success && response.data.data) {
                                line.chinese = response.data.data.translation;
                            } else {
                                line.chinese = '翻译失败';
                            }

                            // 添加到显示列表
                            this.hanList.push({...line});

                            // 添加小延迟避免API调用过快
                            await this.delay(300);
                        } catch (error) {
                            console.error(`翻译第${i + 1}行时出错:`, error);
                            line.chinese = '翻译失败';
                            this.hanList.push({...line});
                        }
                    }
                },

                /**
                 * 为行数组获取词组解释
                 * @param {Array} lines - 行数组
                 */
                async translateWordGroupDesc(lines) {
                    for (let i = 0; i < lines.length; i++) {
                        const line = lines[i];
                        try {
                            // 使用后端词组解析接口
                            const response = await axios.get(`http://127.0.0.1:9001/api/translate/phrases?text=${encodeURIComponent(line.english)}`);

                            if (response.data && response.data.success && response.data.data) {
                                line.groupDesc = response.data.data.analysis;
                            } else {
                                line.groupDesc = '词组解析失败';
                            }

                            // 更新hanList中的对应项
                            this.$set(this.hanList[i], 'groupDesc', line.groupDesc);

                            // 添加小延迟避免API调用过快
                            await this.delay(300);
                        } catch (error) {
                            console.error(`解析第${i + 1}行词组时出错:`, error);
                            line.groupDesc = '词组解析失败';
                            this.$set(this.hanList[i], 'groupDesc', line.groupDesc);
                        }
                    }
                },

                /**
                 * 加载单词分析（懒加载）
                 * @param {Object} word - 单词对象
                 * @param {number} lineIndex - 行索引
                 * @param {number} wordIndex - 单词索引
                 */
                async loadWordAnalysis(word, lineIndex, wordIndex) {
                    // 如果已经加载过，直接返回
                    if (word.analysis) {
                        return;
                    }

                    // 设置加载状态
                    this.$set(word, 'analysis', '正在分析词汇...');

                    try {
                        const analysis = await this.getWordAnalysis(word.english);

                        // 更新分析结果
                        this.$set(word, 'analysis', analysis);

                        // 同时更新hanList中的对应项
                        this.$set(this.hanList[lineIndex].wordChildren[wordIndex], 'analysis', analysis);

                    } catch (error) {
                        console.error('获取词汇分析失败:', error);
                        this.$set(word, 'analysis', '获取词汇分析失败，请稍后重试');
                    }
                },

                /**
                 * 获取单词分析
                 * @param {string} word - 单词
                 * @returns {Promise<string>} 词汇分析结果
                 */
                async getWordAnalysis(word) {
                    try {
                        // 清理单词，去除标点符号
                        const cleanWord = word.replace(/[^\w]/g, '').toLowerCase();
                        if (!cleanWord) return '';

                        // 调用后端接口
                        const response = await axios.get(`http://127.0.0.1:9001/api/translate?word=${encodeURIComponent(cleanWord)}`);

                        if (response.data && response.data.success && response.data.data) {
                            // 返回translation字段的内容
                            return response.data.data.translation || response.data.data;
                        } else {
                            return '获取词汇分析失败';
                        }
                    } catch (error) {
                        console.error('获取词汇分析失败:', error);
                        return '获取词汇分析失败，请稍后重试';
                    }
                },

                /**
                 * 调用dmxapi
                 * @param {string} content - 要发送的内容
                 * @returns {Promise<string>} API响应内容
                 */
                async callDmxApi(content) {
                    const requestData = {
                        max_tokens: 8192,
                        model: "gemini-2.0-flash",
                        temperature: 0.8,
                        top_p: 1,
                        presence_penalty: 1,
                        messages: [
                            {
                                role: "system",
                                content: "你是一个英语老师"
                            },
                            {
                                role: "user",
                                content: content
                            }
                        ]
                    };

                    try {
                        const response = await axios.post(
                            this.apiConfig.url,
                            requestData,
                            {headers: this.apiConfig.headers}
                        );

                        if (response.data && response.data.choices && response.data.choices[0]) {
                            return response.data.choices[0].message.content;
                        } else {
                            throw new Error('API响应格式不正确');
                        }
                    } catch (error) {
                        console.error('API调用失败:', error);
                        throw error;
                    }
                },

                /**
                 * 格式化词组解释内容
                 * @param {string} content - 原始内容
                 * @returns {string} 格式化后的HTML内容
                 */
                formatGroupDescContent(content) {
                    if (!content) return '';

                    // 如果是加载状态或错误信息，直接返回
                    if (content.includes('正在解析') || content.includes('解析失败')) {
                        return content;
                    }

                    // 转义HTML特殊字符
                    let formattedContent = content
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/"/g, '&quot;')
                        .replace(/'/g, '&#39;');

                    // 处理换行符
                    formattedContent = formattedContent.replace(/\n/g, '<br>');

                    // 处理加粗文本 **text** -> <strong>text</strong>
                    formattedContent = formattedContent.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');

                    // 处理斜体文本 *text* -> <em>text</em>
                    formattedContent = formattedContent.replace(/\*(.*?)\*/g, '<em>$1</em>');

                    // 处理列表项 - 开头的行
                    formattedContent = formattedContent.replace(/^- (.+)$/gm, '<li>$1</li>');

                    // 处理数字列表项 1. 开头的行
                    formattedContent = formattedContent.replace(/^\d+\.\s+(.+)$/gm, '<li>$1</li>');

                    // 将连续的 <li> 包装在 <ul> 中
                    formattedContent = formattedContent.replace(/(<li>.*?<\/li>(?:\s*<br>\s*<li>.*?<\/li>)*)/g, '<ul>$1</ul>');

                    // 清理 <ul> 内的多余 <br>
                    formattedContent = formattedContent.replace(/<ul>(.*?)<\/ul>/gs, function (match, content) {
                        return '<ul>' + content.replace(/<br>/g, '') + '</ul>';
                    });

                    return formattedContent;
                },

                /**
                 * 格式化分析内容为HTML（公共方法）
                 * @param {string} content - 分析内容
                 * @returns {string} 格式化后的HTML内容
                 */
                formatAnalysisContent(content) {
                    if (!content) {
                        return '<div style="color: #999; font-style: italic;">加载中...</div>';
                    }

                    if (content === '正在分析词汇...' || content.includes('正在解析') || content.includes('正在翻译')) {
                        return `<div style="color: #409EFF;"><i class="el-icon-loading"></i> ${content}</div>`;
                    }

                    if (content.includes('获取词汇分析失败') || content.includes('解析失败') || content.includes('翻译失败')) {
                        return `<div style="color: #F56C6C;"><i class="el-icon-warning"></i> ${content}</div>`;
                    }

                    // 将文本转换为HTML格式
                    let htmlContent = content
                        // 转义HTML特殊字符
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/"/g, '&quot;')
                        .replace(/'/g, '&#39;')
                        // 处理换行
                        .replace(/\n\n/g, '</p><p>')
                        .replace(/\n/g, '<br>')
                        // 处理粗体标记
                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                        // 处理斜体标记
                        .replace(/\*(.*?)\*/g, '<em>$1</em>')
                        // 处理列表项
                        .replace(/^[\s]*\*[\s]+(.*?)(<br>|$)/gm, '<li>$1</li>')
                        // 处理数字列表
                        .replace(/^[\s]*\d+\.[\s]+(.*?)(<br>|$)/gm, '<li>$1</li>');

                    // 包装段落
                    if (!htmlContent.includes('<p>') && !htmlContent.includes('<li>')) {
                        htmlContent = '<p>' + htmlContent + '</p>';
                    } else {
                        htmlContent = '<p>' + htmlContent + '</p>';
                    }

                    // 处理列表
                    htmlContent = htmlContent.replace(/(<li>.*?<\/li>)/gs, '<ul>$1</ul>');

                    return htmlContent;
                },

                /**
                 * 延迟函数
                 * @param {number} ms - 延迟毫秒数
                 */
                delay(ms) {
                    return new Promise(resolve => setTimeout(resolve, ms));
                },

                /**
                 * 保存数据到 sessionStorage
                 * @param {string} key - 存储键名
                 * @param {any} value - 存储值
                 */
                saveToSession(key, value) {
                    try {
                        const storageKey = `englishLearner_${key}`;
                        sessionStorage.setItem(storageKey, JSON.stringify(value));
                    } catch (error) {
                        console.warn('保存到 sessionStorage 失败:', error);
                    }
                },

                /**
                 * 从 sessionStorage 获取数据
                 * @param {string} key - 存储键名
                 * @param {any} defaultValue - 默认值
                 * @returns {any} 存储的值或默认值
                 */
                getFromSession(key, defaultValue = null) {
                    try {
                        const storageKey = `englishLearner_${key}`;
                        const stored = sessionStorage.getItem(storageKey);
                        return stored ? JSON.parse(stored) : defaultValue;
                    } catch (error) {
                        console.warn('从 sessionStorage 读取失败:', error);
                        return defaultValue;
                    }
                },

                /**
                 * 获取标题并设置HTML title
                 */
                async getTitleAndSetHtmlTitle() {
                    try {
                        // 调用后端接口获取标题
                        const response = await axios.get(`http://127.0.0.1:9001/api/gettitle?content=${encodeURIComponent(this.inputText)}`);

                        if (response.data && response.data.success && response.data.data) {
                            const title = response.data.data.title;
                            // 设置HTML的title
                            document.title = title;
                            console.log('HTML标题已设置为:', title);
                        } else {
                            console.warn('获取标题失败:', response.data);
                        }
                    } catch (error) {
                        console.error('获取标题时出错:', error);
                        // 如果获取标题失败，设置一个默认标题
                        document.title = '英语学习助手 - 文本解析';
                    }
                },

                /**
                 * 清除 sessionStorage 中的数据
                 * @param {string} key - 存储键名（可选，不传则清除所有相关数据）
                 */
                clearSession(key = null) {
                    try {
                        if (key) {
                            const storageKey = `englishLearner_${key}`;
                            sessionStorage.removeItem(storageKey);
                        } else {
                            // 清除所有相关数据
                            const keys = Object.keys(sessionStorage);
                            keys.forEach(k => {
                                if (k.startsWith('englishLearner_')) {
                                    sessionStorage.removeItem(k);
                                }
                            });
                            // 清除当前页面数据
                            this.inputText = '';
                            this.hanList = [];
                            this.$message.success('缓存已清除');
                        }
                    } catch (error) {
                        console.warn('清除 sessionStorage 失败:', error);
                        this.$message.error('清除缓存失败');
                    }
                },

                /**
                 * 初始化数据，从 sessionStorage 恢复
                 */
                initializeFromSession() {
                    // 恢复输入文本
                    const savedInputText = this.getFromSession('inputText', '');
                    if (savedInputText) {
                        this.inputText = savedInputText;
                    }

                    // 恢复解析结果
                    const savedHanList = this.getFromSession('hanList', []);
                    if (savedHanList && savedHanList.length > 0) {
                        this.hanList = savedHanList;
                        this.$message.success('已恢复上次的解析结果');
                    }

                    // 恢复OCR结果
                    const savedOcrResults = this.getFromSession('ocrResults', []);
                    if (savedOcrResults && savedOcrResults.length > 0) {
                        this.ocrResults = savedOcrResults;
                    }
                },

                /**
                 * 处理图片文件变化
                 * @param {Object} file - 文件对象
                 * @param {Array} fileList - 文件列表
                 */
                handleImageChange(file, fileList) {
                    // 验证文件类型
                    const isImage = file.raw.type.startsWith('image/');
                    if (!isImage) {
                        this.$message.error('只能上传图片文件！');
                        return false;
                    }

                    // 验证文件大小（限制为10MB）
                    const isLt10M = file.raw.size / 1024 / 1024 < 10;
                    if (!isLt10M) {
                        this.$message.error('图片大小不能超过 10MB！');
                        return false;
                    }

                    // 为新文件生成预览URL
                    if (file.raw && !file.url) {
                        file.url = URL.createObjectURL(file.raw);
                    }

                    // 更新上传的图片列表
                    this.uploadedImages = fileList;
                    this.$message.success(`已选择 ${fileList.length} 张图片`);
                },

                /**
                 * 处理图片移除
                 * @param {Object} file - 被移除的文件
                 * @param {Array} fileList - 剩余文件列表
                 */
                handleImageRemove(file, fileList) {
                    console.log('文件移除:', file, fileList);
                    this.uploadedImages = fileList || [];
                },

                /**
                 * 处理文件数量超出限制
                 * @param {Array} files - 超出的文件列表
                 * @param {Array} fileList - 当前文件列表
                 */
                handleExceed(files, fileList) {
                    this.$message.warning(`最多只能上传 10 张图片，当前选择了 ${files.length + fileList.length} 张图片`);
                },

                /**
                 * 处理图片卡片预览
                 * @param {Object} file - 要预览的文件对象
                 */
                handlePictureCardPreview(file) {
                    // 如果文件有URL，直接使用
                    if (file.url) {
                        this.dialogImageUrl = file.url;
                    }
                    // 如果是新上传的文件，创建本地预览URL
                    else if (file.raw) {
                        this.dialogImageUrl = URL.createObjectURL(file.raw);
                    }
                    // 显示预览对话框
                    this.dialogVisible = true;
                },

                /**
                 * 处理附件输入框获得焦点
                 */
                handleFileInputFocus() {
                    this.fileInputPlaceholder = '请按 Ctrl+V 粘贴图片文件';
                    // 添加粘贴事件监听器
                    document.removeEventListener('paste', this.handlePaste);
                    document.addEventListener('paste', this.handlePaste);
                },

                /**
                 * 处理附件输入框键盘事件
                 * @param {Event} event - 键盘事件
                 */
                handleFileInputKeydown(event) {
                    console.log("🚀 ~ handleFileInputKeydown ~ event:", event)
                    // 阻止在只读输入框中输入
                    if (event.key !== 'Tab' && event.key !== 'Escape') {
                        event.preventDefault();
                    }

                    // 处理 Escape 键失去焦点
                    if (event.key === 'Escape') {
                        this.$refs.fileInput.blur();
                    }


                },

                /**
                 * 处理粘贴事件
                 * @param {ClipboardEvent} event - 粘贴事件
                 */
                handlePaste(event) {
                    console.log('粘贴事件触发:', event);

                    // 检查事件对象是否存在
                    if (!event) {
                        this.$message.warning('粘贴事件无效');
                        return;
                    }

                    const clipboardData = event.clipboardData || window.clipboardData;

                    // 检查 clipboardData 是否存在
                    if (!clipboardData) {
                        this.$message.warning('无法访问粘贴板数据');
                        return;
                    }

                    const items = clipboardData.items;

                    // 检查 items 是否存在
                    if (!items) {
                        this.$message.warning('您的浏览器不支持粘贴文件功能');
                        return;
                    }

                    let hasImageFile = false;

                    // 遍历粘贴板中的所有项目
                    for (let i = 0; i < items.length; i++) {
                        const item = items[i];

                        // 检查 item 是否存在
                        if (!item) {
                            continue;
                        }

                        // 检查是否为图片文件
                        if (item.kind === 'file' && item.type && item.type.startsWith('image/')) {
                            const file = item.getAsFile();
                            if (file) {
                                hasImageFile = true;
                                this.addPastedFile(file);
                                console.log("🚀 ~ handlePaste ~ from  file:", file)
                            }
                        }
                    }

                    if (!hasImageFile) {
                        this.$message.warning('粘贴板中没有找到图片文件');
                    }

                    // 阻止默认粘贴行为
                    event.preventDefault();
                },

                /**
                 * 添加粘贴的文件到上传列表
                 * @param {File} file - 粘贴的文件
                 */
                addPastedFile(file) {
                    // 检查文件数量限制
                    if (this.uploadedImages.length >= 10) {
                        this.$message.warning('最多只能上传 10 张图片');
                        return;
                    }

                    // 检查文件类型
                    if (!file.type.startsWith('image/')) {
                        this.$message.warning('只支持图片文件格式');
                        return;
                    }

                    // 检查文件大小（限制为10MB）
                    const maxSize = 10 * 1024 * 1024; // 10MB
                    if (file.size > maxSize) {
                        this.$message.warning('文件大小不能超过 10MB');
                        return;
                    }

                    // 创建文件对象，模拟 el-upload 的文件格式
                    const fileObj = {
                        name: file.name || `pasted-image-${Date.now()}.${file.type.split('/')[1]}`,
                        size: file.size,
                        type: file.type,
                        raw: file,
                        url: URL.createObjectURL(file), // 为粘贴文件生成预览URL
                        status: 'ready',
                        uid: Date.now() + Math.random()
                    };

                    // 添加到上传列表
                    this.uploadedImages.push(fileObj);

                    // 更新 el-upload 组件的文件列表
                    if (this.$refs.imageUpload) {
                        this.$refs.imageUpload.uploadFiles.push(fileObj);
                    }

                    this.$message.success(`成功添加文件: ${fileObj.name}`);
                    this.fileInputPlaceholder = `已添加 ${this.uploadedImages.length} 个文件`;

                    console.log('添加粘贴文件:', fileObj);
                    console.log('当前上传文件列表:', this.uploadedImages);
                },

                /**
                 * 处理附件输入框失去焦点
                 */
                handleFileInputBlur() {
                    this.fileInputPlaceholder = '';
                    // 移除粘贴事件监听器
                    document.removeEventListener('paste', this.handlePaste);
                },

                /**
                 * 处理OCR图片识别
                 */
                async processOcrImages() {
                    if (this.uploadedImages.length === 0) {
                        this.$message.warning('请先上传图片');
                        return;
                    }

                    this.isOcrProcessing = true;

                    try {
                        // 创建FormData对象
                        const formData = new FormData();

                        // 添加所有图片文件
                        this.uploadedImages.forEach((fileItem, index) => {
                            formData.append('files', fileItem.raw);
                        });

                        // 调用后端OCR接口
                        const response = await axios.post('http://127.0.0.1:9001/api/translate/ocr', formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            },
                            timeout: 120000 // 2分钟超时
                        });

                        if (response.data && response.data.success && response.data.data) {
                            this.ocrResults = response.data.data?.results;
                            console.log("🚀 ~ processOcrImages ~  this.ocrResults:", this.ocrResults)

                            // 将所有成功识别的文字合并到输入框
                            const allOcrText = this.ocrResults?.map(i2 => i2?.text)?.join('\n\n');

                            if (allOcrText?.trim()) {
                                // 如果输入框已有内容，则追加
                                if (this.inputText.trim()) {
                                    this.inputText += '\n\n' + allOcrText;
                                } else {
                                    this.inputText = allOcrText;
                                }

                                // 保存OCR结果到缓存
                                this.saveToSession('ocrResults', this.ocrResults);

                                this.$message.success(`OCR识别完成！成功识别`);

                                // 显示详细结果
                                this.showOcrResults();
                            } else {
                                this.$message.warning('未能从图片中识别出文字内容');
                            }
                        } else {
                            throw new Error('OCR接口返回数据格式错误');
                        }
                    } catch (error) {
                        console.error('OCR处理失败:', error);

                        if (error.code === 'ECONNABORTED') {
                            this.$message.error('OCR识别超时，请稍后重试');
                        } else if (error.response) {
                            this.$message.error(`OCR识别失败：${error.response.data?.message || '服务器错误'}`);
                        } else {
                            this.$message.error('OCR识别失败，请检查网络连接');
                        }
                    } finally {
                        this.isOcrProcessing = false;
                    }
                },

                /**
                 * 显示OCR识别结果详情
                 */
                showOcrResults() {
                    if (this.ocrResults.length === 0) {
                        return;
                    }

                    let resultHtml = '<div style="max-height: 400px; overflow-y: auto;">';

                    this.ocrResults.forEach((result, index) => {
                        if (result.success) {
                            resultHtml += `
                                <div style="margin-bottom: 15px; padding: 10px; border: 1px solid #e4e7ed; border-radius: 4px;">
                                    <div style="font-weight: bold; color: #409EFF; margin-bottom: 5px;">
                                        <i class="el-icon-picture"></i> ${result.filename}
                                    </div>
                                    <div style="background-color: #f5f7fa; padding: 8px; border-radius: 3px; font-size: 14px; line-height: 1.5;">
                                        ${result.text.replace(/\n/g, '<br>')}
                                    </div>
                                </div>
                            `;
                        } else {
                            resultHtml += `
                                <div style="margin-bottom: 15px; padding: 10px; border: 1px solid #f56c6c; border-radius: 4px;">
                                    <div style="font-weight: bold; color: #f56c6c; margin-bottom: 5px;">
                                        <i class="el-icon-warning"></i> ${result.filename}
                                    </div>
                                    <div style="color: #f56c6c; font-size: 14px;">
                                        识别失败：${result.error}
                                    </div>
                                </div>
                            `;
                        }
                    });

                    resultHtml += '</div>';

                    this.$alert(resultHtml, 'OCR识别结果详情', {
                        dangerouslyUseHTMLString: true,
                        customClass: 'ocr-results-dialog'
                    });
                },
              /*格式化
              * 1 后端有一个结构我的参数是text一段文本
              * 2 后端问dmxapi 问ai用自然语言切割成一句一句的话,用list返回
              * */
                async triggerformattingText() {
                    // 检查是否有输入文本
                    if (!this.inputText || !this.inputText.trim()) {
                        this.$message.warning('请先输入要格式化的文本内容');
                        return;
                    }

                    // 显示加载状态
                    const loading = this.$loading({
                        lock: true,
                        text: '正在格式化文本...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    try {
                        // 调用后端格式化接口
                        const response = await axios.post('http://127.0.0.1:9001/api/formatelin', {
                            text: this.inputText.trim()
                        }, {
                            timeout: 30000 // 30秒超时
                        });

                        if (response.data && response.data.success) {
                            const { sentences, originalText, fromCache } = response.data.data;
                            console.log("🚀 ~ triggerformattingText ~ sentences:", sentences)

                            // 可选：将格式化后的句子保存到某个变量中供后续使用
                            this.inputText = (sentences||[])?.join('\n');
                            
                            this.$message.success(`文本格式化完成！共切割为 ${sentences.length} 个句子`);
                            
                        } else {
                            throw new Error(response.data?.message || '格式化接口返回数据格式错误');
                        }
                    } catch (error) {
                        console.error('文本格式化失败:', error);
                        
                        if (error.code === 'ECONNABORTED') {
                            this.$message.error('文本格式化超时，请稍后重试');
                        } else if (error.response) {
                            this.$message.error(`文本格式化失败：${error.response.data?.message || '服务器错误'}`);
                        } else {
                            this.$message.error('文本格式化失败，请检查网络连接');
                        }
                    } finally {
                        loading.close();
                    }
                },

            },

            mounted() {
                // 组件挂载后的初始化
                console.log('英语学习助手已加载');

                // 从 sessionStorage 恢复数据
                this.initializeFromSession();
            },
            beforeDestroy() {
                // 清理粘贴事件监听器
                document.removeEventListener('paste', this.handlePaste);
            }
        });
    </script>
</body>

</html>
